<template>
    <div>
        <!-- 搜索 -->
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="form.user" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.pass" placeholder="地址"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="quan">选中删除</el-button>
                <el-button type="primary" @click="ser">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table
            ref="multipleTable"
            :data="reslist"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="155"> </el-table-column>
            <el-table-column label="电话号码" width="220" prop="mobile">
                <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
            </el-table-column>
            <el-table-column prop="nickname" label="姓名" width="220">
            </el-table-column>
            <el-table-column label="头像" width="190">
                <template slot-scope="scope">
                    <!-- <img
                        :src="scope.row.avatar"
                        alt=""
                        width="50px"
                        height="50px"
                    /> -->
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.avatar"
                        :preview-src-list="srcList"
                        @click="da(scope.row.avatar)"
                    >
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="adress" label="地址" width="190">
            </el-table-column>
            <el-table-column label="时间" width="190">
                <template slot-scope="scope">{{
                    scope.row.created_at | filtime
                }}</template>
            </el-table-column>
            <el-table-column label="操作" width="320">
                <template slot-scope="scope">
                    <el-button type="success" @click="del(scope.row.uid)"
                        >删除</el-button
                    >
                    <el-button type="success" @click="bian(scope.row)"
                        >编辑</el-button
                    >
                    <el-button type="success">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagenum"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.length"
        >
        </el-pagination>

        <!-- 弹出框 -->

        <el-dialog title="输入内容" :visible.sync="show">
            <el-form :model="form">
                <el-form-item label="名称">
                    <el-input
                        v-model="form.nickname"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="号码">
                    <el-input
                        v-model="form.adress"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="show = false"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            srcList:[],
            post: [],
            cate: [],
            list: [],
            pagenum: 1,
            pagesize: 5,
            show: false,
            form: {
                nickname: "",
                adress: "",
            },
            form: {
                user: "",
                pass: "",
            },
        };
    },
    mounted() {
        this.getlist();
    },
    filters: {
        filtime(val) {
            return new Date(val * 1000).toLocaleString();
        },
    },

    computed: {
        reslist() {
            return this.list.slice(
                this.pagesize * (this.pagenum - 1),
                this.pagesize * this.pagenum
            );
        },
    },

    methods: {
        getlist() {
            this.$axios.get("/list.json").then((res) => {
                console.log(res);
                this.list = res.data;
                this.cate = res.data;
            });
        },
        // 分页
        handleSizeChange(res) {
            console.log(res);
            this.pagsize = res;
        },
        handleCurrentChange(res) {
            console.log(res);
            this.pagenum = res;
        },
        // 删除
        del(id) {
            // console.log(id)
            this.reslist.forEach((item, index) => {
                if (item.uid == id) {
                    this.list.splice(index, 1);
                }
            });
        },
        // 编辑
        bian(res) {
            this.show = true;
            console.log(res);
            this.form = res;
        },
        // 搜索
        onSubmit() {
            this.list = this.cate.filter((item) => {
                return (
                    item.nickname.includes(this.form.user) &&
                    item.adress.includes(this.form.pass)
                );
            });
        },
        // 选中删除
        handleSelectionChange(res) {
            res.map((item) => {
                this.post.push(item.uid);
            });
        },

        quan() {
            this.list = this.list.filter((item) => {
                if (this.post.indexOf(item.uid) == -1) {
                    return item;
                }
            });
        },
        ser() {
            (this.list = this.cate),
                (this.form.user = ""),
                (this.form.pass = "");
        },
        da(img){
            console.log(img)
             this.srcList.push(img)
        }
    },
};
</script>
<style lang="scss" scoped></style>
